<template>
  <div class="home">
    <dv-full-screen-container>
      <dv-border-box-11 title="果业强">
        <dv-border-box-7 class="dv-border-box-7">

          <dv-border-box-12 style="height: auto;">
            <div class="text" :style="{ 'text-indent': ($route.query.id != '1' ? '2em' : '0') }">{{ data.content }}
              <font>{{
                  data.important
              }}</font>
            </div>
          </dv-border-box-12>

          <div class="swiper-warrpe" style="margin:0 auto;margin-top:20px;" v-if="imgList.length > 0 && $route.query.id === '1'">
            <com-swiper-image :list="imgList" :cover="true" h="675px" w="1798px">
            </com-swiper-image>
          </div>


          <dv-border-box-10 style="height: auto; margin-top: 20px;" v-if="tableData.length > 0">
            <div class="table" v-show="!isShow">
              <el-table :data="tableData" borde :height="650">
                <el-table-column prop="tree" label="树" width="100" />
                <el-table-column prop="china" label="中国" width="300" />
                <el-table-column prop="international" label="世界" width="300" />
                <el-table-column prop="remark" label="备注" width="auto" />
              </el-table>
            </div>

            <div class="table" v-show="isShow">
              <el-table :data="tableData2" borde :height="650">
                <el-table-column prop="tree" label="树" width="100" />
                <el-table-column prop="name" label="种类名称" width="auto" />
                <el-table-column prop="number" label="种类数量" width="100" />
              </el-table>
            </div>
          </dv-border-box-10>

          <div class="honor" v-if="$route.query.id === '3'">
            <el-row>
              <el-col :span="10">
                <dv-border-Box-1 class="dv-border-Box-1">
                  <com-swiper-image
                    :list="imgList"
                    h="760px"
                    w="700px"
                    :cover="false"
                  ></com-swiper-image>
                </dv-border-Box-1>
              </el-col>
              <el-col :span="14">
                <dv-border-Box-1 class="dv-border-Box-2">
                  <dv-decoration-7 class="dv-decoration-7">{{tableTitle}}</dv-decoration-7>
                  <dv-scroll-board class="dv-scroll-board" :config="config" />
                </dv-border-Box-1>
              </el-col>
            </el-row>
          </div>




          <div :class="$route.query.id != '2' ? 'ctrl-btn' : 'active'">
            <span class="back" @click="backHandel" v-if="isBack"></span>
            <span class="next" @click="nextHandel" v-if="isNext"></span>
            <span class="last" @click="lastHandel" v-if="isLast"></span>
          </div>


        </dv-border-box-7>
      </dv-border-box-11>
    </dv-full-screen-container>
  </div>
</template>

<script>
import ComSwiperImage from '../components/ComSwiperImage.vue'
import jsonData from './content.json'
export default {
  components: {
    ComSwiperImage,
  },
  data() {
    return {
      jsonData,
      data: {},
      imgList: [],
      tableData: [],
      tableData2: [],
      isBack: true,
      isNext: false,
      isShow: false,
      isLast: false,
      justifyContent: "",
      right: 0,
      config: {
        data: [],
        rowNum:8,
        header:['荣获时间','荣誉名称','授奖单位','文件依据'],
        headerHeight:50,
        columnWidth:[100,400,300,250],
        align:['center','center','center','center'],
      },
      tableTitle:""
    }
  },
  mounted() {
    switch (this.$route.query.id) {
      case "1":
        this.data = this.jsonData.gmContent
        this.imgList = this.formatImgList(this.data.imgs)
        break;
      case "2":
        this.data = this.jsonData.plContent
        this.tableData = this.data.tableDatabj
        this.tableData2 = this.data.tableDatapz
        this.isNext = true
        break;
      case "3":
        this.data = this.jsonData.pzContent
        this.config.data = this.jsonData.pzContent.tableData.data
        this.tableTitle = this.jsonData.pzContent.tableData.tableTitle
        this.imgList = this.formatImgList(this.jsonData.pzContent.imgs)
        break;
    }
  },
  methods: {
    backHandel() {
      this.$router.back()
    },
    nextHandel() {
      this.isShow = true
      this.isNext = false
      this.isLast = true
    },
    lastHandel() {
      this.isShow = false
      this.isNext = true
      this.isLast = false
    },
    formatImgList(list) {
      if (list) {
        let _list = []
        list.forEach(item => {
          _list.push(this.$getFullPath('/data/', item))
        })
        return _list
      }
    }
  }
}
</script>

<style lang="less" scoped>
.home {
  width: 100vw;
  height: 100vh;
  background: url('../../assets/bg.jpg');


  .dv-border-box-11 {
    padding: 70px 40px 40px 40px;

    /deep/ .dv-border-box-11-title {
      font-size: 24px;
    }

    /deep/ .border-box-content {
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }

  .dv-border-box-7 {
    width: 100%;
    height: 100%;
    position: relative;

    /deep/ .border-box-content {
      display: block;
      padding: 20px;
    }

    .text {
      font-size: 24px;
      color: aliceblue;
      // text-indent: 2em;

      font {
        font-size: 24px;
        color: aqua;
      }
    }

    .active {
      display: flex;
      justify-content: space-around;
      width: 250px;
      height: 100px;
      position: absolute;
      right: 20px;
      bottom: 15px;

      .back {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        background: url('../../assets/home.png');
        background-size: 100% 100%;
        display: block;
      }

      .next {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        background: url('../../assets/next.png');
        background-size: 100% 100%;
        display: block;
      }

      .last {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        background: url('../../assets/last.png');
        background-size: 100% 100%;
        display: block;
      }
    }

    .ctrl-btn {
      position: absolute;
      right: 20px;
      bottom: 15px;
      width: 100px;
      height: 100px;

      .back {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        background: url('../../assets/home.png');
        background-size: 100% 100%;
        display: block;
      }
    }




    .table {
      width: 100%;

      /deep/ .el-table--fit {
        font-size: 20px !important;
        color: rgb(255, 255, 255);
      }

      /deep/.el-table tr {
        background-color: #fff0;
      }

      /deep/ .el-table,
      .el-table__expanded-cell {
        background-color: #fff0;
      }

      /deep/ .el-table th.el-table__cell {
        background-color: #fff0;
      }

      /deep/.el-table thead {
        color: #ffffff;
        font-weight: 500;
      }

      /deep/ .el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell {
        background-color: #0a347c;
      }
    }

    .honor {
      margin-top: 20px;
      height: 600px;

      .dv-border-Box-1 {
        height: 800px;
      }

      .dv-border-Box-2 {
        height: 640px;
        /deep/ .dv-decoration-7{
          align-items: flex-start;
          font-size: 20px;
          height: auto;
          color: #ffffff;
          margin-bottom: 20px;
          svg{
            margin: 0 10px !important;
          }
        }
        /deep/ .dv-scroll-board{
          width: 95%;
          margin: 0 auto;
          height: 550px;
          .row-item{
            height: 50px;
          }
        }
      }
    }

  }
}
</style>